<template>
  <VirtualList
    :items="items"
    :item-height="50"
    :container-height="600"
    @item-click="handleClick"
  >
    <template #item="{ item, index }">
      <div class="custom-item">
        {{ index + 1 }}. {{ item }}
      </div>
    </template>
  </VirtualList>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VirtualList from '@/components/virtualList.vue'

const items = ref(Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`))

const handleClick = (item: string) => {
  console.log('Clicked:', item)
}
</script>



<style scoped lang="scss">
.custom-item {
  padding: 12px 24px;
  font-family: Arial;
  color: #333;
}
</style>